<style type="text/css">
    .swiper2-sp {
        display: flex;
        justify-content: center;
        //  background: palegreen;
    }
    
    .swiper2-sp p {
        background: #fff;
    }
    
    .swiper2-sp .swiper-pagination-bullet-active {
        border-radius: 0.05rem;
        width: 0.30rem;
    }
</style>



<div class="swiper-container" id="swiper2">
    <div class="swiper-wrapper s-t-s1">
        <div class="swiper-slide s-t-s1-ss"><img src="http://106.13.115.175:9999/headlineImg/bf976b12gy1g3i87a1vyfg206o06otac.gif"></div>
        <div class="swiper-slide s-t-s1-ss"><img src="http://106.13.115.175:9999/headlineImg/bf976b12gy1g3i87a09xbg206o06edh9.gif"></div>
        <div class="swiper-slide s-t-s1-ss"><img src="http://106.13.115.175:9999/headlineImg/bf976b12gy1g3i87a9kqwg205004h751.gif"></div>
        <div class="swiper-slide s-t-s1-ss"><img src="http://106.13.115.175:9999/headlineImg/bf976b12gy1g3i87a16iwg206o06otab.gif"></div>
        <div class="swiper-slide s-t-s1-ss"><img src="http://106.13.115.175:9999/headlineImg/bf976b12gy1g3i87a16neg206o06ojt2.gif"></div>
        <div class="swiper-slide s-t-s1-ss"><img src="http://106.13.115.175:9999/headlineImg/bf976b12gy1g3i87a17meg206o06ota7.gif"></div>
    </div>
    <div id="" class="swiper-pagination swiper2-sp"></div>
</div>

<script type="text/javascript">
    var swiper2 = new Swiper('#swiper2', {
        autoplay: {
            delay: 1000,
        },
        pagination: {
            el: '.swiper2-sp',
            // clickable: true,
            renderBullet: function(index, className) {
                return '<p class="' + className + '">' + '</p>';
            },
        },
    });
</script>






<!-- <style type="text/css">
 	*{margin:0;padding:0;outline:0;font-family:-apple-system,BlinkMacSystemFont,helvetica neue,Helvetica,pingfang sc,microsoft yahei,Arial,sans-serif}
 	body{background:#f5f5f5}i{font-style:normal}
 	i[attr]{color:#00c187}i[value]{color:#f90761}
 	i[word]{color:#000}
 	i[obj]{color:#ee6d02}
 	i[fn]{color:#a800ff}
 	i[note]{color:#888;font-weight:400}
 	i[cn]{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"PingFang SC","MicrosoftYaHei",Arial,sans-serif}.container{position:relative;overflow:hidden;margin:0 auto;width:1010px;height:auto;background:#fff;box-shadow:#d6d6d6 0 0 15px}
 	header{height:50px;background:#333;text-align:center;line-height:50px;color:#fff;font-size:17px}
 	h1,h2{text-align:center;font-size:16px;font-weight:400;margin:30px 0}
 	h2{margin:20px 0}
 	p.title{text-align:center;font-size:20px;font-weight:700;margin:20px 0}.use{width:960px;overflow:hidden;margin:0 auto}.use>div{float:left;width:calc((100% - 19px)/ 2);border:#dfdfdf solid 1px;border-radius:4px;max-height:856px;overflow-y:auto;overflow-x:hidden}.use>div:last-child{margin-left:15px}.use>div::-webkit-scrollbar{width:4px}.use>div::-webkit-scrollbar-thumb{width:4px;background:#eee;border-radius:2px}.use>div p{display:block;text-align:center;height:44px;line-height:44px;border-bottom:#dfdfdf solid 1px;background:#fafafa;font-weight:700}.code{font-size:12px;line-height:170%;padding:15px;color:#2868f9}pre,pre *{font-family:Consolas}.height-200{height:200px}.placeholder{height:50px;text-align:center;overflow:hidden}#next,#prev{background:#09f;color:#fff;border:none;border-radius:4px;cursor:pointer;width:60px;height:30px;margin-top:15px}#custom-dot{text-align:center;margin:25px 0 0 0}#custom-dot i{display:inline-block;width:12px;height:12px;background:#ddd;border-radius:50%;cursor:pointer;margin:0 10px;transition:.2s}#custom-dot i.active{background:#222}
 </style> -->
<!-- 
<style type="text/css">
    .v-slideshow-arrow i {
        display: none;
    }
    
    .v-slideshow-dot .active {
        border-radius: 0.05rem;
        width: 0.30rem;
    }
</style> -->


<!-- 轮播图 -->
<!-- <div id="app-7" class="height-200" style="height:3.06rem;width:7.50rem;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>



<script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script type="text/javascript">
    /*！
     *	Vue-slideshow v1.1.0
     *	
     * 	Copyright (C) 2019, ZhaoGang
     * 	Released under the MIT license
     *
     *  Update: 2019-04-20
     */
    "use strict";
    ! function(t, i, e) {
        function o(i, e) {
            return (e || t).querySelector(i)
        }

        function a(i, e) {
            return [].slice.call((e || t).querySelectorAll(i))
        }
        o("style.v-slideshow-style") || o("head").insertAdjacentHTML("beforeend", '<style class="v-slideshow-style">.v-slideshow-container{position:relative;width:100%;height:100%;margin:0;padding:0;overflow:hidden;background:#fff}.v-slideshow-wrapper{position:absolute;height:100%;margin:0;padding:0}.v-slideshow-box,.v-slideshow-box a,.v-slideshow-box img{position:absolute;width:100%;height:100%}.v-slideshow-box a,.v-slideshow-box img{display:block;border:0}.v-slideshow-box-fade{opacity:0;transition:.7s;display:none}.v-slideshow-box-show{opacity:1}.v-slideshow-box-block{display:block}.v-slideshow-box.v-slideshow-block{display:block}.v-slideshow-dot{position:absolute;height:10px;bottom:20px;left:50%;transform:translateX(-50%)}.v-slideshow-dot i{display:block;float:left;cursor:pointer;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);margin:0 5px;transition:.3s}.v-slideshow-dot i.active{background:rgba(255,255,255,1)}.v-slideshow-arrow i{display:block;width:40px;height:40px;background-image:url("");background-color:rgba(0,0,0,.5);background-position:center;background-repeat:no-repeat;position:absolute;top:50%;border-radius:50%;cursor:pointer;transform:translateY(-50%)}.v-slideshow-arrow i:first-child{left:15px}.v-slideshow-arrow i:last-child{right:15px;transform:translateY(-50%) rotate(180deg)}</style>\n\t\t'), e.component("vue-slideshow", {
            template: '\n\t\t\t<div \n\t\t\t\tclass="v-slideshow-container" \n\t\t\t\t:data-custom-arrow="Array.isArray( config.arrow ) && config.arrow.join( \'|\' )" \n\t\t\t\t:data-custom-dot="typeof config.dot === \'string\' && config.dot" \n\t\t\t\t:data-id="\'v-slideshow-id-\' + Date.now() + ~~(Math.random() * 100000000)"\n\t\t\t\t@mouseenter="enter" \n\t\t\t\t@mouseleave="leave"\n\t\t\t>\n\t\t\t\t<div class="v-slideshow-wrapper" :style="wrapperStyle">\n\t\t\t\t\t<div class="v-slideshow-box" v-if="config.effect === \'slide\'" :style="boxStyle( 0 )">\n\t\t\t\t\t\t<a :href="data[ data.length - 1 ].href"><img :src="data[ data.length - 1 ].src"></a>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div v-for="( list, index ) in data" :class="boxClass( index )" :style="boxStyle( index + 1 )">\n\t\t\t\t\t\t<a :href="list.href"><img :src="list.src"></a>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="v-slideshow-box" v-if="config.effect === \'slide\'" :style="boxStyle( data.length + 1 )">\n\t\t\t\t\t\t<a :href="data[ 0 ].href"><img :src="data[ 0 ].src"></a>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class="v-slideshow-arrow" v-if="config.arrow !== false && !Array.isArray( config.arrow )">\n\t\t\t\t\t<i @click="arrowEvent( 0 )"></i>\n\t\t\t\t\t<i @click="arrowEvent( 1 )"></i>\n\t\t\t\t</div>\n\t\t\t\t<div class="v-slideshow-dot" v-if="config.dot !== false && typeof config.dot !== \'string\'">\n\t\t\t\t\t<i v-for="( n, index ) in data" v-if="index < data.length" :class="dotIClass( index )" @click="dotEvent( index )"></i>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t',
            props: ["data", "config"],
            computed: {
                wrapperStyle: function() {
                    return {
                        width: "slide" === this.config.effect ? 100 * (this.data.length + 2) + "%" : "100%",
                        transform: "slide" === this.config.effect && "translateX(-" + 100 / (this.data.length + 2) + "%)"
                    }
                },
                boxClass: function() {
                    return function(t) {
                        return {
                            "v-slideshow-box": !0,
                            "v-slideshow-box-fade": "fade" === this.config.effect && !0,
                            "v-slideshow-box-show": "fade" === this.config.effect && 0 === t,
                            "v-slideshow-box-block": "fade" === this.config.effect && 0 === t
                        }
                    }
                },
                boxStyle: function() {
                    return function(t) {
                        return {
                            width: ("slide" !== this.config.effect ? 100 : 100 / (this.data.length + 2)) + "%",
                            left: "slide" === this.config.effect && 100 / (this.data.length + 2) * t + "%"
                        }
                    }
                },
                dotIClass: function() {
                    return function(t) {
                        return {
                            active: 0 === t
                        }
                    }
                }
            },
            methods: {
                slide: function(t) {
                    var e = i.VueSlideShowIDCache[this.$el.getAttribute("data-id")];
                    e.animated = !0;
                    var o = 100 / (this.data.length + 2),
                        a = this.data.length;
                    this.dotChange(t, this.config.dot), -1 === t && this.dotChange(a - 1, this.config.dot), t === a && this.dotChange(0, this.config.dot);
                    var s = this.$el.querySelector(".v-slideshow-wrapper");
                    s.style.transition = ".7s", requestAnimationFrame(function() {
                        s.style.transform = "translateX(-" + o * (t + 1) + "%)"
                    });
                    var n = i.setTimeout(function() {
                        s.style.transition = "0s", t === a && (e.imageIndex = 0, s.style.transform = "translateX(-" + o + "%)"), -1 === t && (e.imageIndex = a - 1, s.style.transform = "translateX(-" + o * a + "%)"), i.clearTimeout(n), e.animated = !1
                    }, 700)
                },
                fade: function(t) {
                    var e = i.VueSlideShowIDCache[this.$el.getAttribute("data-id")];
                    e.animated = !0, this.dotChange(t, this.config.dot), a(".v-slideshow-box", this.$el).forEach(function(o, a) {
                        if (a === t) {
                            o.classList.add("v-slideshow-box-block");
                            var s = i.setTimeout(function() {
                                o.classList.add("v-slideshow-box-show"), i.clearTimeout(s)
                            }, 16)
                        } else {
                            o.classList.remove("v-slideshow-box-show");
                            var n = i.setTimeout(function() {
                                o.classList.remove("v-slideshow-box-block"), i.clearTimeout(n), e.animated = !1
                            }, 700)
                        }
                    })
                },
                dotChange: function(t, e) {
                    i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].imageIndex = t, ("string" == typeof e ? [].slice.call(o(e).children) : a(".v-slideshow-dot i", this.$el)).forEach(function(i, e) {
                        i.classList.remove("active"), e === t && i.classList.add("active")
                    })
                },
                dotEvent: function(t, e) {
                    i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].animated || (this["fade" === this.config.effect ? "fade" : "slide"](t), this.dotChange(t, e))
                },
                arrowEvent: function(t) {
                    if (!i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].animated) {
                        var e = i.VueSlideShowIDCache[this.$el.getAttribute("data-id")];
                        t ? ++e.imageIndex > this.data.length - 1 && "slide" !== this.config.effect && (e.imageIndex = 0) : --e.imageIndex < 0 && "slide" !== this.config.effect && (e.imageIndex = this.data.length - 1), "fade" === this.config.effect ? this.fade(e.imageIndex) : this.slide(e.imageIndex)
                    }
                },
                enter: function() {
                    this.config.autoplay && i.clearInterval(i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].autoTimer)
                },
                leave: function() {
                    this.config.autoplay && this.play()
                },
                play: function() {
                    var t = this;
                    i.VueSlideShowIDCache[this.$el.getAttribute("data-id")].autoTimer = i.setInterval(function() {
                        t.arrowEvent(1)
                    }, ~~this.config.autoplay)
                }
            },
            mounted: function() {
                var t = this;
                i.VueSlideShowIDCache || (i.VueSlideShowIDCache = {}), i.VueSlideShowIDCache[this.$el.getAttribute("data-id")] = {
                    imageIndex: 0,
                    animated: !1,
                    autoTimer: null
                }, this.config.autoplay && this.play();
                var e = this.$el.getAttribute("data-custom-arrow");
                e && (e = e.split("|"), o(e[0]).onclick = function() {
                    return t.arrowEvent(0)
                }, o(e[1]).onclick = function() {
                    return t.arrowEvent(1)
                });
                var a = this.$el.getAttribute("data-custom-dot");
                a && [].slice.call(o(a).children).forEach(function(i, e) {
                    e > t.data.length - 1 || (i.onclick = function() {
                        return t.dotEvent(e, t.config.dot)
                    })
                })
            }
        }), e.prototype.VueSlideShow = function(t, i) {
            return o(t).innerHTML = '<vue-slideshow :data="images" :config="config"></vue-slideshow>', new e({
                el: t,
                data: {
                    images: i.images,
                    config: i.config
                }
            })
        }
    }(document, window, Vue);
</script>-->
<!-- 轮播图 -->
<!-- <script>
    new Vue({
        el: "#app-7",
        data: {
            images: [{
                src: "https://c.static-nike.com/a/images/f_auto/w_1920,c_limit/n0eghaovoor09cjcaawl/nikecom-homepage-cn-919.jpg",
                href: "#1"
            }, {
                src: "https://c.static-nike.com/a/images/f_auto/w_1920,c_limit/tjlpfuzck1seu1butec1/190831-multi-category-hp-jp.jpg",
                href: "#2"
            }, {
                src: "https://c.static-nike.com/a/images/f_auto/w_1920,c_limit/wle8rxuv6ubwvuskfkxn/190831-multi-category-hp-jp.jpg",
                href: "#3"
            }, {
                src: "https://c.static-nike.com/a/images/f_auto/w_1920,c_limit/fz4jrcbul8cgqahei2fi/190831-multi-category-hp-jp.jpg",
                href: "#4"
            }, {
                src: "https://c.static-nike.com/a/images/f_auto/w_1920,c_limit/ahwvmjo1isq1llhyp6sn/nike-.jpg",
                href: "#4"
            }],
            config: {
                effect: "slide",
                autoplay: 2000
            }
        }
    });
</script> -->